<template>
  <div class="debug-container">
    <h2>登录调试工具</h2>
    
    <el-form :model="loginForm" label-width="80px">
      <el-form-item label="用户名">
        <el-input v-model="loginForm.username" placeholder="请输入用户名" />
      </el-form-item>
      
      <el-form-item label="密码">
        <el-input v-model="loginForm.pwd" type="password" placeholder="请输入密码" />
      </el-form-item>
      
      <el-form-item>
        <el-button type="primary" @click="testLogin">测试登录</el-button>
        <el-button @click="clearLogs">清除日志</el-button>
        <el-button @click="quickTest">快速测试（注册+登录）</el-button>
      </el-form-item>
    </el-form>
    
    <div class="debug-logs">
      <h3>请求/响应日志</h3>
      <div v-if="logs.length > 0" class="logs-container">
        <div v-for="(log, index) in logs" :key="index" class="log-item">
          <div class="log-header">{{ log.timestamp }} - {{ log.type }}</div>
          <pre class="log-content">{{ JSON.stringify(log.data, null, 2) }}</pre>
        </div>
      </div>
      <div v-else class="no-logs">暂无日志</div>
    </div>
  </div>
</template>

<script>
import { reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import request from '../api/request'
import { testLogin as apiTestLogin, quickTest as apiQuickTest } from '../utils/loginTest'

export default {
  name: 'LoginDebug',
  setup() {
    const loginForm = reactive({
      username: '23002973',
      pwd: '123456'
    })
    
    const logs = ref([])
    
    const addLog = (type, data) => {
      logs.value.push({
        timestamp: new Date().toLocaleString(),
        type,
        data
      })
      // 自动滚动到底部
      setTimeout(() => {
        const logsContainer = document.querySelector('.logs-container')
        if (logsContainer) {
          logsContainer.scrollTop = logsContainer.scrollHeight
        }
      }, 100)
    }
    
    const clearLogs = () => {
      logs.value = []
    }
    
    const testLogin = async () => {
      try {
        addLog('登录请求参数', loginForm)
        
        // 使用我们的测试工具函数
        const result = await apiTestLogin(loginForm.username, loginForm.pwd)
        addLog('登录测试结果', result)
        
        if (result && result.success) {
          ElMessage.success('登录测试成功！')
        } else {
          ElMessage.error(result?.message || '登录测试失败')
        }
      } catch (error) {
        addLog('登录测试异常', {
          message: error.message,
          stack: error.stack
        })
        ElMessage.error('登录测试异常，请查看日志')
      }
    }
    
    const quickTest = async () => {
      try {
        // 生成唯一用户名用于测试
        const timestamp = Date.now()
        const testUsername = `testuser_${timestamp}`
        const testPassword = 'test123456'
        
        addLog('快速测试开始', {
          username: testUsername,
          password: testPassword
        })
        
        // 使用我们的快速测试函数
        await apiQuickTest(testUsername, testPassword)
        
        addLog('快速测试结束', '测试流程已完成，请查看控制台详细日志')
        ElMessage.info('快速测试已完成，请查看浏览器控制台获取详细信息')
      } catch (error) {
        addLog('快速测试异常', {
          message: error.message,
          stack: error.stack
        })
        ElMessage.error('快速测试异常，请查看日志')
      }
    }
    
    return {
      loginForm,
      logs,
      testLogin,
      clearLogs,
      quickTest
    }
  }
}
</script>

<style scoped>
.debug-container {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.debug-logs {
  margin-top: 30px;
}

.logs-container {
  max-height: 400px;
  overflow-y: auto;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  padding: 10px;
}

.log-item {
  margin-bottom: 15px;
  padding: 10px;
  background-color: #f5f5f5;
  border-radius: 4px;
}

.log-header {
  font-weight: bold;
  color: #303133;
  margin-bottom: 5px;
}

.log-content {
  white-space: pre-wrap;
  word-break: break-all;
  color: #606266;
  margin: 0;
  font-size: 12px;
}

.no-logs {
  text-align: center;
  color: #909399;
  padding: 20px;
}
</style>